<script setup lang="ts">
import type { Emits } from './utils/types'
import type { GoodsInfoResult } from '@/api/details/types'
import DialogReport from '@/components/DialogReport/index.vue'
import { useAuth } from '@/stores/index'
import { copyToClipboard } from '@/utils/index'
import { ElMessage } from 'element-plus'
import Publisher from '../Publisher/index.vue'

const tabsType = shallowRef<1 | 2 | 3>(1)
const goodsInfo = inject<GoodsInfoResult>('goodsInfo')
const $emit = defineEmits<Emits>()

const { isNextOperation } = useAuth()


function handleCopy(text: any) {
    copyToClipboard(text)
}


const dialogVisible = shallowRef<boolean>(false)
function handleReport() {
    if (isNextOperation()) {
        dialogVisible.value = true
    }
}
const $router = useRouter()

function handleJumpAgreement(type: string, mark: string) {
    window.open($router.resolve(`/agreement?type=${type}&mark=${mark}`).href, '_blank')
}

</script>

<template>
    <div class="price">
        <div class="top">
            <div class="title">{{ goodsInfo?.title }}</div>
            <div class="content">
                <el-tooltip class="box-item" effect="dark" :content="`描述：${goodsInfo?.brief}`" placement="top">
                    <div class="remark" style="max-width: 348px;">描述：{{ goodsInfo?.brief }}</div>
                </el-tooltip>
            </div>
            <div class="money">
                <p>￥{{ goodsInfo?.get_price || 0 }}<span>元</span></p>
                <p>￥{{ goodsInfo?.market_price || 0 }}元</p>
            </div>
            <div class="btns">
                <button type="button" @click="$emit('on-click-purchase')">下载</button>
                <button type="button" @click="$emit('on-click-purchase')">加入购物车</button>
            </div>
        </div>
        <div class="tabs">
            <div class="tabs-titlte">
                <div :class="{ active: tabsType == 1 }">
                    <span @click="tabsType = 1">基本信息</span>
                </div>
                <div :class="{ active: tabsType == 2 }">
                    <span @click="tabsType = 2">版权信息</span>
                </div>
                <div :class="{ active: tabsType == 3 }">
                    <span @click="tabsType = 3">店铺及售卖信息</span>
                </div>
            </div>
            <div class="tabs-content">
                <ul class="type-1" v-show="tabsType == 1">
                    <li>
                        <div>
                            <span>类</span>
                            <span>型：</span>
                        </div>
                        <div>{{ goodsInfo?.type_name }}</div>
                    </li>
                    <li>
                        <div>
                            <span>编</span>
                            <span>号：</span>
                        </div>
                        <div>{{ goodsInfo?.code }}</div>
                        <div class="operation-btns">
                            <button type="button" @click="handleCopy(goodsInfo?.code)">复制</button>
                            <button type="button" @click="handleReport">举报</button>
                        </div>
                    </li>
                    <li>
                        <div>
                            <span>上</span>
                            <span>传</span>
                            <span>时</span>
                            <span>间：</span>
                        </div>
                        <div>{{ goodsInfo?.create_time }}</div>
                    </li>
                    <li>
                        <div>
                            <span>格</span>
                            <span>式：</span>
                        </div>
                        <div>{{ goodsInfo?.format }}</div>
                    </li>
                    <li>
                        <div>
                            <span>分</span>
                            <span>辨</span>
                            <span>率：</span>
                        </div>
                        <div>{{ goodsInfo?.width }}*{{ goodsInfo?.height }}</div>
                    </li>
                    <li>
                        <div>
                            <span>大</span>
                            <span>小：</span>
                        </div>
                        <div>{{ goodsInfo?.file_size }}</div>
                    </li>
                    <li>
                        <div>
                            <span>销</span>
                            <span>售</span>
                            <span>额：</span>
                        </div>
                        <div class="blue-color">{{ goodsInfo?.sales || 0 }}元</div>
                    </li>
                    <li>
                        <div>
                            <span>点</span>
                            <span>击：</span>
                        </div>
                        <div class="blue-color">{{ goodsInfo?.hits }}</div>
                    </li>
                    <li>
                        <div>
                            <span>下</span>
                            <span>载：</span>
                        </div>
                        <div class="blue-color">{{ goodsInfo?.download }}</div>
                    </li>
                    <li>
                        <div>
                            <span>备</span>
                            <span>注：</span>
                        </div>
                        <el-tooltip class="box-item" effect="dark" :content="goodsInfo?.remark" placement="top">
                            <div class="remark">{{ goodsInfo?.remark }}</div>
                        </el-tooltip>
                    </li>
                    <div class="instructions">
                        <p>购买说明：对含有国旗、国徽等党政元素的作品，元素仅作为效果示例展示及爱党爱国宣传，店主不享有权利，禁止商用。</p>
                        <p> 具体说明请点击<span @click="handleJumpAgreement('empower', 'empower')">《购买产品授权说明》</span></p>
                    </div>
                </ul>
                <ul class="type-2" v-show="tabsType == 2">
                    <li>
                        <div>
                            <span>协</span>
                            <span>议：</span>
                        </div>
                        <div>已签署版权入驻协议</div>
                    </li>
                    <li>
                        <div>
                            <span>协</span>
                            <span>议：</span>
                        </div>
                        <div><el-image style="width: 100px; height: 50px;" fit="contain" :src="goodsInfo?.shop_protocol"
                                alt="shop_protocol" :previewSrcList="[goodsInfo?.shop_protocol]" hide-on-click-modal />
                        </div>
                    </li>
                    <li v-if="goodsInfo?.is_copyright == 1">
                        <div>
                            <span>版</span>
                            <span>权</span>
                            <span>证</span>
                            <span>明：</span>
                        </div>
                        <div>已上传版权证明</div>
                    </li>
                    <li v-if="goodsInfo?.copyright_image">
                        <div>
                            <span>版</span>
                            <span>权</span>
                            <span>证</span>
                            <span>明：</span>
                        </div>
                        <div><el-image style="width: 100px; height: 50px;" fit="contain"
                                :src="goodsInfo?.copyright_image" alt="" :previewSrcList="[goodsInfo?.copyright_image]"
                                hide-on-click-modal />
                        </div>
                    </li>

                    <div class="instructions" style="margin-top: auto;">
                        <p>购买说明：对含有国旗、国徽等党政元素的作品，元素仅作为效果示例展示及爱党爱国宣传，店主不享有权利，禁止商用。</p>
                        <p> 具体说明请点击<span @click="handleJumpAgreement('empower', 'empower')">《购买产品授权说明》</span></p>
                    </div>
                </ul>
                <Publisher style="margin: 0; padding: 0 14px; padding-top: 31px;" v-show="tabsType == 3" />
            </div>
        </div>
        <DialogReport v-model="dialogVisible" :goodsInfo="goodsInfo" />
    </div>
</template>


<style lang="scss" scoped>
.price {
    background-color: #F5F4F8;
    padding: 18px 16px;

    .instructions {
        margin-top: 14px;
        font-family: 'SOURCEHANSANSCN-EXTRALIGHT';

        p {
            color: rgba(206, 206, 206, 1);
            font-size: 12px;


            &:nth-child(1) {
                border-top: 1px dashed #D0D0D0;
                padding-top: 10px;
            }

            &:last-child {
                text-align: center;

                span {
                    color: #3785F2;
                    cursor: pointer;
                }
            }
        }
    }

    .tabs {
        margin-top: 29px;

        .tabs-content {

            .type-2 {
                height: 368px;
                display: flex;
                flex-direction: column;
            }

            ul {
                list-style: none;
                width: 95%;
                margin: 0 auto;
                margin-top: 20px;
                min-height: 330px;

                li {
                    display: flex;
                    margin: 10px 0;
                    align-items: flex-start;

                    &:last-of-type {
                        padding-bottom: 18px;
                    }

                    .operation-btns {
                        margin-left: auto;

                        button {
                            width: 42px;
                            height: 18px;
                            line-height: 18px;
                            border-radius: 5px;
                            background-color: transparent;
                            color: rgb(206, 206, 206);
                            font-size: 13px;
                            border: 1px solid rgb(206, 206, 206);
                            margin-right: 10px;
                            cursor: pointer;
                        }
                    }

                    .blue-color {
                        color: #3785F2;
                    }

                    div {
                        color: rgba(154, 154, 154, 1);
                        font-size: 14px;

                        &:nth-child(1) {
                            width: 5em;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            font-family: 'SOURCEHANSANSCN-LIGHT';
                        }

                        &:nth-child(2) {
                            margin-left: 5px;
                            font-family: 'SOURCEHANSANSCN-EXTRALIGHT';
                        }
                    }
                }
            }
        }

        .tabs-titlte {
            display: flex;
            border-bottom: 1px solid #CECECE;
            line-height: 40px;

            div {
                flex: 1;
                color: #BBBBBD;
                position: relative;
                font-family: 'SOURCEHANSANSCN-LIGHT';

                span {
                    cursor: pointer;
                }
            }

            .active {
                color: #101010;
                font-family: 'SOURCEHANSANSCN-REGULAR';

                &::after {
                    content: '';
                    display: block;
                    width: 4em;
                    height: 2px;
                    background-color: var(--primary-color);
                    position: absolute;
                    bottom: -1px;
                }
            }
        }
    }

    .top {
        .btns {
            margin-top: 20px;

            button {
                width: 50%;
                cursor: pointer;

                &:first-child {
                    height: 40px;
                    border-radius: 5px 0px 0px 5px;
                    background-color: var(--primary-color);
                    color: rgba(255, 255, 255, 1);
                    font-size: 14px;
                    border: 1px solid rgba(249, 20, 20, 1);
                }

                &:last-child {
                    height: 40px;
                    border-radius: 0px 5px 5px 0px;
                    background-color: transparent;
                    color: var(--primary-color);
                    font-size: 14px;
                    border: 1px solid var(--primary-color);
                }
            }
        }

        .money {
            display: flex;
            align-items: flex-end;
            margin: 10px 0;

            p {
                line-height: 1em;
                height: 1em;

                &:first-child {
                    color: var(--primary-color);
                    font-size: 28px;

                    span {
                        color: var(--primary-color);
                        font-size: 14px;
                        margin-left: 5px;
                    }
                }

                &:last-child {
                    color: rgba(16, 16, 16, 1);
                    font-size: 14px;
                    margin-left: 10px;
                    text-decoration: line-through
                }
            }
        }

        .content {
            color: rgba(187, 187, 187, 1);
            font-size: 13px;
            margin-top: 12px;
        }

        .title {
            color: rgba(16, 16, 16, 1);
            font-size: 20px;
            font-family: 'SOURCEHANSANSCN-REGULAR';
        }
    }
}
</style>
